<template>
    <div class="xunjingwendao">

        <div style="width: 100%;">
            <div class="buyContent">
                <div class="buy_flex">
                    <div class="left_price">
                        <p class="jxkc">{{ videoParams.courseName }}</p>
                        <div class="ydy">时长：{{ videoParams.duration }}s <span style="padding-left: 10px;"
                                v-if="videoParams.price == 0">试听课</span></div>
                    </div>
                    <div class="right_price">
                        <div class="price">

                            <div class="kf">添加客服微信</div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="container_video">
                <!-- 视频播放器区域 -->
                <div class="player-container">
                    <video-player @ended="ended" object-fit="fill" ref="videoPlayer" class="vjs-custom-skin"
                        :options="playerOptions" @play="onPlayerPlay" />
                    <img src="../../assets/image/play.png" v-if="playStatus" @click="play" class="play-btn" alt="">
                </div>

                <!-- 视频信息区域 -->
                <div class="info-container">
                    <div class="left-section" style="text-align: center;">
                        <div style="display: flex;justify-content: center;width: 100%;">
                            <div class="ql-editor" v-html="videoParams.descs"></div>
                        </div>

                    </div>

                    <!-- 评论列表 -->
                    <div class="comments-section">
                        <h2>播放列表</h2>
                        <div v-for="(comment, index) in dataList" :key="index" class="comment-item">
                            <div class="user-info">

                                <span class="username">{{ comment.courseName }}</span>
                                <span class="time">{{ comment.duration }}s</span>
                                <img src="../../assets/image/play1.png" style="width: 38px;padding-left: 20px;" alt="">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="答题" width="45%">
            <div class="question-content" style="height: 350px;">
                <div class="question-select">
                    <div class="question-title" style="font-weight: 800;
	line-height: 30px;">
                        <span>{{ videoData.question.questionContent }}</span>
                    </div>
                    <div style="margin-top: 20px;">
                        <el-radio-group v-model="radiovalue1">
                            <el-radio @change="radioChange(item.optionId, item.optionLabel)"
                                v-for="(item, index) in videoData.question.optionsList" :label="item.optionLabel">{{
                                    item.optionLabel + ':' + item.optionContent }}</el-radio>

                        </el-radio-group>
                    </div>


                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAnswer">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'
import {
    courseList,
    saveAwser
} from '@/api/index'
export default {
    components: {
        videoPlayer
    },
    data() {
        return {
            awser: '',
            questionParams: {
                awser: '',
                optionId: '',
                status: 1
            },
            radiovalue1: '',
            videoData: { question: { questionContent: "", } },
            dialogVisible: false,
            activeName: 'first',
            dataList: [],
            courseItem: {},
            playStatus: true,
            videoParams: {
                title: '示例视频标题',
                duration: '12:34',
                description: '这里是视频的详细描述内容...',
                cover: 'https://example.com/cover.jpg',
                isBuy: false
            },
            playerOptions: {
                muted: false,
                // width: '100%', // 或者具体的像素值，例如 640px
                // aspectRatio: '16:9',

                autoplay: false,
                controls: false,
                poster: 'https://example.com/cover.jpg',
                sources: [{
                    type: 'video/mp4',
                    src: 'https://example.com/sample.mp4'
                }]
            },
            comments: [
                {
                    avatar: 'https://example.com/avatar1.jpg',
                    username: '用户1',
                    time: '2023-08-01',
                    content: '这个视频很不错！'
                },
                {
                    avatar: 'https://example.com/avatar2.jpg',
                    username: '用户2',
                    time: '2023-08-02',
                    content: '学到了很多知识'
                }
            ]
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.videoData = JSON.parse(this.$route.query.buyItem)
            this.courseItem = JSON.parse(this.$route.query.courseItem)

            console.log(this.videoData, "9999999999999", this.courseItem)
            // 3. 更新播放器配置
            this.playerOptions = {
                ...this.playerOptions, // 保留原有配置
                poster: this.videoData.courseImgUrl, // 更新封面
                sources: [{  // 更新视频源
                    type: 'video/mp4',
                    src: this.videoData.courseUrl
                }]
            }

            // 4. 更新视频信息
            this.videoParams = {
                ...this.videoParams,
                ...this.videoData
            }
            this.getListTypeLeft()
        })



    },
    methods: {
        saveAnswer() {
            let params = {
                courseId: this.videoData.id,
                questionId: this.videoData.questionId,
                answer: this.questionParams.awser,
                optionId: this.questionParams.optionId,
                status: this.questionParams.status
            }
            saveAwser(params).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    })
                    this.dialogVisible = false
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    })
                }
            })
        },
        radioChange(id, label) {

            this.questionParams.awser = label;
            this.questionParams.optionId = id;
            if (label == this.videoData.question.answer) {
                this.questionParams.status = 1
            } else {
                this.questionParams.status = 2
            }
        },
        ended() {
            console.log('播放结束')
            this.$confirm('播放结束, 请答题！', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.dialogVisible = true
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        handleClick(tab, event) {

        },
        getListTypeLeft() {
            courseList({
                courseCategory: this.courseItem.id,

            }).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    console.log(res)
                    this.dataList = res.rows;

                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    })
                }
            })
        },
        onPlayerPlay() {
            this.$refs.videoPlayer.player.play()
        },
        play() {
            console.log('播q放开始', this.courseItem.isBuy)
            debugger
            if (this.courseItem.isBuy == 0 && !this.courseItem.isBuy) {
                this.$refs.videoPlayer.player.pause()
                alert('请先购买后观看')
            } else {
                if (this.$refs.videoPlayer && this.$refs.videoPlayer.player) {
                    this.playerOptions.controls = true;
                    setTimeout(() => {
                        this.$refs.videoPlayer.player.play()
                    }, 1000);
                    this.playStatus = false;
                } else {
                    console.error('Video player instance is not available.');
                }



            }
        }
    }
}
</script>

<style scoped lang="scss">
.ql-editor {
    img {
        width: 100%;
    }
}

.video-js {
    width: 100%;
    height: 100%;
}

.video-js video {
    object-fit: cover;
}

.buyContent {

    height: 90px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(28, 31, 33, .06), 0 4px 8px 0 rgba(28, 31, 33, .06), 0 8px 16px 0 rgba(28, 31, 33, .06), 0 12px 24px 0 rgba(28, 31, 33, .06), 0 16px 32px 0 rgba(28, 31, 33, .06);
    width: 100%;
    display: flex;
    align-items: center;

    .buy_flex {
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        width: 100%;
        display: flex;

        .left_price {
            text-align: center;

            .jxkc {
                font-size: 24px;
                font-weight: 800;
                color: #e6c9a1;
                line-height: 31px;
            }

            .ydy {
                font-size: 18px;
                color: #8c6d6d;
                margin-top: 10px;


            }
        }

        .right_price {
            justify-content: center;
            display: flex;
            align-items: center;

            .price {
                .item {
                    color: #f20d0d;
                    font-weight: 700;
                    font-size: 26px;
                }

                .kf {
                    font-size: 14px;
                    color: #999;
                    margin-top: 10px;
                    text-align: center;
                    cursor: pointer;
                    width: 120px;
                    height: 30px;
                    line-height: 30px;

                    background: #e6c9a1;
                    color: #000;
                    border-radius: 10px;
                }
            }

            .buy_content {
                display: flex;
                justify-content: center;
                align-items: center;

                .buy {
                    width: 110px;
                    height: 46px;
                    text-align: center;
                    line-height: 46px;
                    font-size: 16px;
                    margin-left: 15px;
                    border: 1px solid #d4bc98;
                    border-radius: 24px 0 0 24px;
                    color: #d4bc98;
                    font-weight: 600;
                }

                .addCart {
                    width: 110px;
                    height: 48px;
                    text-align: center;
                    line-height: 48px;


                    font-size: 16px;

                    font-weight: 700;
                    cursor: pointer;
                    margin-left: 15px;
                    position: relative;
                    border-radius: 0 24px 24px 0;
                    background: #d4bc98;
                    color: #fff;
                    margin-left: 0;
                }
            }
        }
    }
}

.container_video {
    max-width: 100%;

}

.player-container {
    width: 100%;
    /* 继承父容器宽度 */
    width: 100%;
    /* 或者具体的像素值，例如 640px */
    height: 80vh;
    /* 初始高度为0，然后通过padding-top或padding-bottom设置比例 */

    /* 16:9 视频比例 */
    position: relative;

    .play-btn {
        position: absolute;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
    }
}

/* 深度选择器穿透scoped限制 */
::v-deep .video-js {
    width: 100% !important;
    height: 100% !important;
    min-height: 680px;
}

/* 保持视频内容比例（可选） */
::v-deep .vjs-tech {
    object-fit: cover;
    /* 或使用 contain */
}

.info-container {
    display: flex;
    margin-top: 20px;
    gap: 30px;
}

.left-section {
    flex: 3;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.title {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

.duration {
    color: #666;
    margin-bottom: 15px;
}

.description {
    color: #666;
    line-height: 1.6;
}

.comments-section {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

.comment-item {
    margin: 15px 0;
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.username {
    font-weight: bold;
    margin-right: 10px;
}

.time {
    color: #999;
    font-size: 12px;
}

.content {
    color: #666;
    line-height: 1.4;
}

::deep .vjs-big-play-button {
    opacity: 0;
}
</style>